<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>山寨微博</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        /*定宽*/
        .w{
            width: 90%;
            margin: 0 auto;
            position: relative;
        }
        body{
            width: 100%;
            height: 100vh;
            background: -webkit-linear-gradient(top, rgb(203, 235, 219), rgb(55, 148, 192));
            overflow: hidden;
        }
        #box{
            width: 500px;
            background-color: white;
            margin: 80px auto;
            border-radius: 5px;
            padding-bottom: 10px;
        }
        #title{
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-bottom: 1px solid #cccccc;
            font-size: 24px;
        }
        #name .nameContent{
            display: inline-block;
            width: 60%;
            height: 50px;
        }
        #name .imgWrapper{
            display: inline-block;
            width: 30%;
            text-align: right;
            position: absolute;
            right: 0;
        }
        #name .imgWrapper img{
            margin-left: 10px;
        }
        #content{
            margin-top: 20px;
            display: flex;
        }
        #show{
            margin-top: 20px;
        }
        #show .showTitle{
            height: 30px;
            line-height: 30px;
            text-indent: 10px;
            background: -webkit-linear-gradient(left, rgb(30,144,255), rgb(135,206,250));
            color: white;
            font-size: 18px;
        }
        .showContent{
            margin-top: 15px;
        }
        .listItem{
            display: flex;
            padding-bottom: 10px;
            border-bottom: 1px dashed #d0d0d0;
            margin-top: 10px;
        }
        .listItem:hover .del{
            display: inline-block;
        }
        .itemLeft{
            width: 20%;
        }
        .itemMiddle{
            width: 70%;
            display: flex;
            flex-direction: column;
        }
        .itemMiddle .itemDate{
            margin-top: 10px;
            color: #d0d0d0;
        }
        .itemRight{
            display: flex;
            width: 10%;
            align-items: flex-end;
        }
        .itemRight .del{
            display: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="w">
            <p id="title">哟！老铁，来发点牢骚吧</p>
            <div id="name">
                <input type="text" class="nameContent form-control" placeholder="请输入名字">
                <div class="imgWrapper">
                    <img src="img/face1.gif" alt="face1">
                    <img src="img/face2.gif" alt="face2">
                </div>
            </div>
            <div id="content">
                <textarea class="form-control contentInput"
                    cols="30" rows="5" placeholder="请输入想说的内容">
                </textarea>
                <button class="addBtn btn btn-primary">完成</button>
            </div>
            <div id="show">
                <div class="showTitle"><span>大家的牢骚</span></div>
                <div class="showContent">
                    <ul class="list"></ul>
                </div>
            </div>
        </div>
    </div>
    <script>
        // 分别获取各个节点
        var nameContent = document.getElementsByClassName('nameContent')[0];
        var contentInput = document.getElementsByClassName('contentInput')[0];
        var addBtn = document.getElementsByClassName('addBtn')[0];
        var list = document.getElementsByClassName('list')[0];
        var aLi = document.getElementsByTagName('LI');
        // 动态添加内容节点
        addBtn.onclick = function () {
            var nameContentValue = nameContent.value;
            var contentInputValue = contentInput.value;
            var oLi = document.createElement('LI');
            oLi.setAttribute('class', 'listItem');
            // 创建对象并获取时间参数
            var date = new Date();
            var month = date.getMonth() + 1;
            var day = date.getDay();
            var hour = date.getHours();
            var minutes = date.getMinutes();
            // 给小于十分的分钟数前面加上0
            if (minutes < 10) {
                minutes = '0' + minutes;
            }
            // 合并为两个格式化的时间
            var time1 = month + '月' + day + '日';
            var time2 = hour + ':' + minutes;
            oLi.innerHTML = `
                <div class="itemLeft"><img src="img/face.gif" alt="face"></div>
                <div class="itemMiddle">
                    <div class="itemContent">
                        <span class="name">${nameContentValue}</span>
                        <span>:</span>
                        <span class="content">${contentInputValue}</span>
                    </div>
                    <div class="itemDate">
                        <span>${time1}</span>
                        <span style="margin-left: 2px">${time2}</span>
                    </div>
                </div>
                <div class="itemRight">
                    <div class="del" onclick="del(this)">删除</div>
                </div>
             `;
            list.insertBefore(oLi, aLi[0]);
        }

        // // 删除事件
        // function del(obj) {
        //     console.log();
        //     list.removeChild((obj.parentNode).parentNode);
        // }

        // 事件委托（事件代理）的方式来删除事件
        list.onclick = function () {
            var event = window.event || arguments[0];
            // 获取被点击的子元素既是event.target。然后判断他的类名。再进行操作
            if (event.target.className == 'del') {
                this.removeChild(event.target.parentNode.parentNode);
            }
        }
    </script>
</body>
</html>